<template>
  <div class="news-publish-page">
    <div class="header">
      <h2>共发布 {{ filteredTotal }} 期</h2>
      <div class="search-bar">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="→"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          style="width: 240px; margin-right: 16px"
          @change="fetchData"
        />
        <el-input
          v-model="searchKeyword"
          placeholder="请输入文章摘要或标题"
          clearable
          style="width: 280px"
          @input="fetchData"
        />
      </div>
    </div>

    <div class="content flex flex-col items-center justify-center">
      <div v-for="item in filteredArticles" :key="item.issueNo" class="article-item">
        <div class="image-wrapper">
          <img :src="item.coverImage" :alt="item.title" />
        </div>
        <div class="info">
          <div class="publish-time">
            <span class="time-text">
              新闻将于 <strong>{{ item.publishTime }}</strong> 自动发布
            </span>
            <a @click.prevent="editTime(item.issueNo)" class="modify-link">修改时间</a>
          </div>
        </div>
        <div class="iconfont">
          <el-icon>
            <View/>
          </el-icon>
        </div>
      </div>
      <div v-if="!filteredArticles.length" class="empty-state">暂无数据</div>
    </div>

    <ViewDetails />
    <div class="pagination">
      <span>共 {{ filteredTotal }} 条</span>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, total"
        :total="filteredTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getIssue } from '@/API/AllApi'
import { View } from '@element-plus/icons-vue'

const [dateRange, searchKeyword] = [ref(''), ref('')]
const [currentPage, pageSize, total] = [ref(1), ref(10), ref(0)]
const articles = ref([])

const fetchData = () => {
  const [startDate, endDate] = dateRange.value || []
  const params = {
    current: currentPage.value,
    currentSize: pageSize.value,
    startDate,
    endDate,
    keyword: searchKeyword.value,
  }

  getIssue(params)
    .then((res) => {
      if (res.code === 200) {
        articles.value = res.data.records.map((item) => ({
          ...item,
          coverImage: item.coverImage?.startsWith('http')
            ? item.coverImage
            : `http://localhost:3000${item.coverImage}`,
        }))
        console.log(articles.value)
        total.value = res.data.total
      } else {
        ElMessage.error(res.msg || '获取失败')
        articles.value = []
      }
    })
    .catch(() => {
      ElMessage.error('请求失败')
      articles.value = []
    })
}

const filteredArticles = computed(() => {
  return articles.value.filter((item) => item.newsIds && item.newsIds.length > 0)
})

const filteredTotal = computed(() => filteredArticles.value.length)

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

const editTime = (id) => {
  dateRange.value = [new Date(), new Date(Date.now() + 24 * 60 * 60 * 1000)]
}

onMounted(fetchData)
</script>

<style scoped>
.news-publish-page {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.header h2 {
  font-size: 18px;
  margin: 0;
  color: #303133;
}

.search-bar {
  display: flex;
  gap: 16px;
}

.content {
  margin-top: 20px;
}

.article-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
  position: relative;
}

.article-item:last-child {
  border-bottom: none;
}

.image-wrapper {
  width: 200px;
  height: 120px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f0f0f0;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  flex: 1;
  margin-left: 16px;
}

.info .title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 8px 0;
}

.info .description {
  font-size: 14px;
  color: #606266;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.publish-time {
  font-size: 14px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-text {
  font-size: 14px;
  color: #ffaf75;
}

.modify-link {
  color: #409eff;
  margin-left: 8px;
  cursor: pointer;
}

.iconfont {
  position: absolute;
  right: -50%;
  font-size: 20px;
  color: #d0d0d1;
}
.empty-state {
  text-align: center;
  padding: 40px;
  color: #999;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
  color: #606266;
  font-size: 14px;
}
</style>
